<template>
	<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
	<u-modal :class="start ? 'show' : ''" @click="$emit('update:start', false)">
		<view class="cu-dialog bg-white" @tap.stop="">
			<form @submit.stop="submit">
				<view class="cu-form-group" :class="{ 'form-group--error': $v.user.account.$error }">
					<view class="title">手机号</view>
					<input name="account" maxlength="11" type='text' v-model.trim="$v.user.account.$model" placeholder="请输入激活的手机号" />
				</view>

				<view class="cu-form-group" :class="{ 'form-group--error': $v.user.password.$error }">
					<view class="title">密码</view>
					<input name="password" maxlength="16" v-model.trim="$v.user.password.$model" :placeholder="$t('placeholder.password')" type="password">
				</view>
				
				<view class="cu-form-group">
					<view class="title">验证码</view>
					<input name="captcha" class='flex-sub' maxlength="4" type="number" v-model.trim="$v.user.captcha.$model" placeholder="请输入图片验证码"></input>
					<img mode="aspectFill" :src="loadCaptcha()" @click="t = (new Date()).valueOf()" />
				</view>
				
				<view class="padding-tb-xl">
					<button formType="submit" class="text-white text-xl cu-btn block bg-primary margin-tb-sm lg" :loading="false">{{ $t('login') }}</button>
				</view>
			</form>

			<view class="flex text-sm padding-lg text-gray">
				<view class="flex-sub text-center padding-lr-sm">
					<text @click="navto('public/signup')">{{ $t('signup') }}</text>
				</view>
				<!--<view class="flex-sub padding-lr-sm">
					<text @click="navto('public/forget">{{ $t('forget') }}</text>
				</view>-->
			</view>

			<view class="margin-tb-xl padding-tb-xl">
				<oauth></oauth>
			</view>
		</view>
	</u-modal>
</template>

<script>
import util from '@/utils/util'
import oauth from '@/components/oauth'
import {mapActions} from 'pinia'

export default {
	mixins: [form],
	components: {oauth},
	data() {
		return {
			user: {
				account: '',
				captcha: '',
				password: ''
			},
			t: (new Date()).valueOf()
		}
	},
	props: {
		start: {
			type: Boolean,
			default: false
		}
	},
	validations: {
		user:{
			account: {
				required,
				minLength: minLength(11)
			},
			captcha: {
				required,
				minLength: minLength(4)
			},
			password: {
				required,
				minLength: minLength(6)
			}				
		}
	},
	methods: {
		...mapActions(['login']),
		async submit(e) {
			if(this.validate('user')) {
				this.loading = true;
				const result = await uni.$u.http.post('index/identity/login', e.detail.value)
				if (result) {
					this.login(result);
					// 登陆成功过关闭登录窗口
					this.$emit('update:start', false)
				}
				this.loading = false
			}
		},
		async loadCaptcha() {
			return await http.image('index/identity/verify')
		}
	}
}
</script>

<style lang='scss' scoped="">
</style>
